<!-- 参考官方文档 -->
<template>
	<view class="">
		<view class="box-title">近期热点</view>
		<view class="box-content">
			<view class="box-content-item box-flex-space" v-for="(item, index) in lists" :key="item.id">
				<view class="box-content-item-text">{{index+1}}. {{item.title}}</view>
				<icon type="clear" @click="onDelete(index)" />
			</view>
			<view class="box-content-total">共{{lists.length}}条热点</view>
			<view class="box-content-operate box-flex-space">
				<input type="text" placeholder="请输入热点..." v-model="iptValue" @confirm="onSubmit" />
				<button size="mini" type="primary" :disabled="!iptValue.length" @click="onSubmit">发布</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	let iptValue = ref('');
	const lists = ref([
		{ id: 1, title: "周杰伦又发新歌" },
		{ id: 2, title: "林俊杰又发新歌" },
		{ id: 3, title: "凤凰传奇又发新歌" },
		{ id: 4, title: "孙燕姿又发新歌" }]);

	function onDelete(index : number) {
		lists.value.splice(index, 1);
	};
	function onSubmit() {
		lists.value.push({ id: Date.now(), title: iptValue.value });
		iptValue.value = '';
	};
</script>

<style lang="scss" scoped>
	@import "@/common/css/common.css";

	.box-title {
		font-size: $custom-font-size-wide;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.box-content {
		width: 90%;
		margin: 10px auto;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;

		.box-content-item {
			padding: 10px 0;
			border-bottom: 1px solid $custom-color-green;

			.box-content-item-text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 10px;
			}
		}

		.box-content-total {
			text-align: center;
			padding: 10px 0;
		}

		.box-content-operate {
			input {
				flex: 4;
				border: 1px solid $custom-color-black;
				margin-right: 5px;
				height: 30px;
				border-radius: 5px;
				padding: 0 10px;
			}

			button {
				flex: 1;
			}
		}
	}
</style>